<?php
use yii\bootstrap\ActiveForm;
use yii\helpers\Url;
use yii\widgets\LinkPager;

?>

<?= $this->render('header'); ?>
<style>
	.table-striped{border-right: 0;border-left:0;}
	.table > tbody > tr.active > td {background-color: #fff0f4;}
	.table > tbody > tr{cursor: pointer;}
	#chooseType{ border-bottom: 0;}
	#chooseType tbody tr { text-align: left;}
	#chooseType tbody tr td{ padding-left: 180px;}
	#chooseType tbody tr td input[type="radio"]{ margin-right: 40px;}
	#serveLog.table tr:hover td {background-color: #fff;}
	body .demo-class-1 .layui-layer-btn a{background:#fe7b9d; border: 0;}
	.tableBox{
		width: 675px;height: 377px;border: 1px solid #e5e5e5;
	}
	.table tbody tr:hover{border: 0;background: none!important;}
	#serveLog{width: 675px;border-bottom: 0;}
	.btnOkBox{
		width: 49.41%;
		height: 175px;
		float: right;
		display: -webkit-box;
		display: -moz-box;
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
		-webkit-box-align: center;
		-moz-box-align: center;
		-ms-flex-align: center;
		-webkit-align-items: center;
		align-items: center;
		-webkit-box-pack: center;
		-moz-box-pack: center;
		-ms-flex-pack: center;
		-webkit-justify-content: center;
		justify-content: center;

	}
	.btnOk{color: #fff;border-radius: 6px;}

	@media (min-width: 992px) and (max-width: 1440px){
		.tableBox{width: 49.41%;height: auto;max-height: 445px;min-height: 445px;}
		#chooseType tbody{
			position: absolute;
			top: 18%;
			left: 12%;
			width: 100%;
		}
		#chooseType tbody tr td{padding-left: 0;}
		#serveLog {width: 49.41%;}


	}
</style>
<div class="container">
	<?php ActiveForm::begin(
			[
				'options'=>[
					'name'=>'myform',
				]
			]
	);?>
		<div class="row mt20">
			<div class="pull-left tableBox">
				<table class="chooseName table table-striped">
					<caption>
						<span>选择会员</span>
						<input type="text" placeholder="请输入会员信息" value="<?= Yii::$app->request->get('key') ?>" style="margin-left: 10px;padding-left: 15px;width: 74.07%;height: 28px;line-height: 28px;" onkeydown="keyDown(event, this)" >
					</caption>
					<thead>
					<tr>
						<th>会员</th>
						<th>电话</th>
						<th>会员类型</th>
					</tr>
					</thead>
					<tbody>

					<?php foreach($memberList as $member): ?>
					<tr member_id="<?= $member['member_id'] ?>">
						<td>
							<input class="hidden" type="radio" name="service_member_id"  value="<?= $member['member_id'] ?>"><?= $member['member_name'] ?>
							<input class="hidden" type="radio" name="service_member_name" value="<?= $member['member_name'] ?>">
							<input class="hidden" type="radio" name="service_member_phone" value="<?= $member['member_mobile'] ?>">
							<input class="hidden" type="radio" name="service_member_type" value="<?= $member['member_type'] ?>">
						</td>
						<td><?= $member['member_mobile'] ?></td>
						<td><?= $member['member_grade'] ?></td>
					</tr>
					<?php endforeach; ?>
					</tbody>
				</table>
				<div class="page">
					<?= LinkPager::widget([
						'pagination' => $memberPages,
						// 'hideOnSinglePage' => true
					]); ?>
				</div>
			</div>
			 <div class="pull-right tableBox" style="overflow-y: auto;overflow-x: hidden;">
				<table class="choose useCard table table-striped hidden">
					<caption>可用消费卡</caption>
					<thead>
					<tr>
						<th>卡片名称</th>
						<th>剩余次数</th>
						<th>员工</th>
					</tr>
					</thead>

					<tbody>
					</tbody>
				</table>
			 </div>
		</div>

		<div class="row mg20-y">
			<div class="pull-left tableBox" style="position: relative;">
				<table id="chooseType" class="choose table table-striped text-center">
					<caption>选择类型</caption>
					<tbody>
					<tr>
						<td style="border-top: none;padding-top: 75px;"><input class="btnSame" name="service_status" value="1" type="radio" checked>开始服务：在“正在服务页面中进行操作”</td>
					</tr>
					<tr>
						<td style="border-top: none;"><input class="btnSame" name="service_status" value="2" type="radio"/>完成服务：本次服务结束，不记录服务起止时间</td>
					</tr>
					<tr class="jl_date">
						<td style="border-top: none;"><input name="service_status" value="3" type="radio" onclick="openPage()" />预约服务：在预约提醒中会显示到期预约服务</td>
						<input type="hidden" name="make_time" value=""/>
					</tr>
					<tr class="last" style="display: none;">
						<td><img src="<?=Yii::getAlias('@web/backend/img/service/four-oclock.png');?>" alt="" style="margin-right: 40px;"/><span class="times red"></span></td>
					</tr>
					</tbody>
				</table>
			</div>

			<div class="pull-right tableBox" style="overflow-y: auto;overflow-x: hidden;">
				<table class="chooseHouse table table-striped text-center">
					<caption style="border-top: 0;">选择房间</caption>
					<thead>
					<tr>
						<th class="text-center">房间</th>
					</tr>
					</thead>
					<tbody>

					<?php foreach($roomList as $room): ?>
					<tr>
						<td>
							<input class="hidden" name="room_id" type="radio" value="<?= $room['config_id'] ?>"/><?= $room['config_val'] ?><?php if($room['service_id']): ?><span style="color: #fe7b9d">&nbsp;(已占用)</span><?php endif; ?>
							<input class="hidden" name="room_name" type="radio" value="<?= $room['config_val'] ?>"/>
						</td>
					</tr>
					<?php endforeach; ?>

					</tbody>
				</table>
			</div>
		</div>

		<div class="row">
			<table id="serveLog" class="table table-striped pull-left">
				<caption style="border: 1px solid #e5e5e5;border-bottom: 0;">服务记录</caption>

				<tbody>
				<tr style=" border-left: 0">
					<td style="padding: 0;"><textarea name="service_remark" placeholder="记录用户使用产品情况，备注等" style="width: 100%;padding-left: 10px;border-top: 0;"></textarea></td>
				</tr>

				</tbody>
			</table>

			<div class="btnOkBox">
				<span class="btnBg btnOk">
					<input type="submit" value="确定" onclick=" return check()" style="display: block; width: 100%; background: 0; border:0;line-height: 36px;">
				</span>
			</div>

		</div>
		<?php ActiveForm::end() ?>
</div>


<?php $this->registerJsFile("@web/system/server/register.js",['position'=>$this::POS_END]);?>

<script>
	function  check()
	{
		var server = document.myform.service_member_id.value
		if( server == ''){
			layer.alert('未选择会员，请选择会员', {
				icon: 2,

			});
			return false;
		}
		var item = $('input[name=service_username_id]:checked').val();
		if( item != ''){
			layer.alert('未选择员工，请选择员工 ', {
				icon: 2,
				skin: 'demo-class-1' //该皮肤由layer.seaning.com友情扩展。关于皮肤的扩展规则，去这里查阅
			});
			return false;

		}
	}
	function keyDown(e, obj) {
		var ev= window.event||e;

		if (ev.keyCode == 13) {
			location.href = '<?= \yii\helpers\Url::to(['register']) ?>?key=' + $(obj).val();
		}
	}

	<?php
	$session = Yii::$app->getSession();
	if ($session->hasFlash('success')) {
		echo "layer.alert('" . $session->getFlash('success') . "', {icon:1})";
	}
	?>

	function openPage() {
		layer.open({
			type: 2,
			title: '',
			shadeClose: false,
			shade: 0.8,
			maxmin: true, //开启最大化最小化按钮
			area: ['622px', '310px'],
			content: "<?= Url::to(['/business/member/datetime']); ?>"
		});
	}
</script>
